<!--其他型号组件  推荐-->
<template>
  <div class="otherModels">
    <h3>
      <span>其他型号</span>
      <i></i>
    </h3>

    <el-table :data="changesTableData" border style="width: 98%; margin:auto">
      <el-table-column  label="孚地订货号" width="350">
        <template slot-scope="scope">
          <div style="display:flex;flex-direction:row;align-items:center;">
            <img v-lazyload="scope.row.goods_logo" src="@/assets/logo/loading.png" style="width:50px;height:50px;margin-right:10px;">
            <!-- <img :src="scope.row.goods_logo" style="width:50px;height:50px;margin-right:10px;"> -->
            <div>
              <p style="width:240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" >{{ scope.row.goods_title }}</p>
              <!-- <p style="width:240px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{ scope.row.goods_title }}</p> -->
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="goods_stock" label="库存" width="200" ></el-table-column>

      <el-table-column prop="delivery_time" label="发货日期(天)" ></el-table-column>

      <el-table-column prop="selling_price" label="孚地价格(元)" >
        <template slot-scope="scope">
          <div
            style="color:red !important; font-weight: 800 !important;"
          >{{ scope.row.selling_price }}</div>
        </template>
      </el-table-column>

      <el-table-column prop="num" fixed="right" label="购买数量(个)" width="150">
        <!-- 组件包括组件的使用方法 作用于 以及行的传参 scope.row.num -->
        <template slot-scope="scope">
          <el-input-number
            size="mini"
            v-model="scope.row.num"
            :min="0"
            :max="scope.row.goods_stock"
          ></el-input-number>
        </template>
      </el-table-column>
    </el-table>

    <div class="chart">
      <p>
        <!-- 查看所有产品共
        <span>{{ Total }}</span> 件 >> -->
      </p>
      <div>
        <span class="paddingbox">共选择了
          <i>{{ numz }}</i>件商品
        </span>
        <span class="paddingbox">总价：
          <i>{{ pricez }}</i>元
        </span>
        <el-button size="small" @click="addCart">
          <span class="el-icon-sold-out"></span>
          加入购物车
        </el-button>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  name: "otherModels",
  props:['tableData'],
  data() {
    return {
      Total: 15,
      myTable: [],
    }
  },

  methods: {
    handleChange(value) {
      console.log(value)
    },
    // 添加到购物车
    addCart() {
      let numz = 0
      console.log(this.tableData)
      this.changesTableData.map(item => {
        numz += item.num
      })

      if (numz) {
        let myForm = []
        let user_id = this.$store.state.UserInfor.user_id
        if(user_id){
                  // // 信息更新
        this.changesTableData.forEach(element => {
          console.log(element)
          if (element.num !== 0) {
            let _myForm = {
              product_id: "",
              num: "",
              goods_spec: ""
            }
            _myForm.product_id = element.id
            _myForm.num = element.num
            _myForm.goods_spec = element.goods_spec // 购物车增加的goods_spec 用来匹配数据
            myForm.push(_myForm)
          }
        })
        console.log(user_id, myForm)
        this.$http({
          method: "post",
          url: "index/web/batchAddToCart",
          data: {
            user_id,
            myForm
          }
        })
          .then(res => {
            this.getCartNum()
            this.$notify({
              title: '成功',
              message: '成功添加到购物车...',
              type: 'success'
            })
          })
          .catch(err => {
            console.log(err)
          })
        } else{
          this.$notify({
            title: '请先登录您的账号...',
            type: 'success'
          })
          this.$router.push({
            name:'login'
          })
        }

      } else {
        this.$message("您还没有选择任何商品 请确保商品的数量 > 1 ...")
      }
    },

    // 获取购物车数量
    async getCartNum() {
      let user_id = this.$store.state.UserInfor.user_id
      let res = this.$http({
        method: 'post',
        url: 'index/index/cartNum',
        data:{
          user_id
        }
      }) 
      res.then((res)=>{
        if(res.data.State.Code == 200){
          console.log(res.data.data)
          this.$store.commit('shopping_num',res.data.data)
        }
      })
      .catch((err)=>{
        console.log(err)
      })
    },
  },

  computed: {
    changesTableData() {
      return this.tableData
    },
    numz() {
      let numz = 0
      this.changesTableData.map(item => {
        numz += item.num
      })
      return numz
    },

    pricez() {
      let pricez = 0

      this.changesTableData.map(item => {
        pricez += item.selling_price * item.num
      })
      pricez = pricez.toFixed(2)
      return pricez
    }
  }
}
</script>
<style lang="scss" scoped>
.otherModels {
  margin-top: 20px;
  width: 1198px;
  border: 1px solid #dfdfdf;

  h3 {
    line-height: 38px;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
    span {
      display: inline-block;
      width: 108px;
      line-height: 38px;
      text-align: center;
      border-top: 2px solid #008cff;
      background: #fff;
    }
    i {
      display: inline-block;
      width: 1089px;
      height: 38px;
      border-bottom: 1px solid #dfdfdf;
      border-left: 1px solid #dfdfdf;
    }
  }
  .chart {
    width: 98%;
    margin: auto;
    height: 76px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    p {
      color: #008cff;
      cursor: pointer;
    }
    div {
      .paddingbox {
        padding: 0 14px;
        i {
          color: red;
        }
      }
    }
  }
}
</style>
<style>
</style>

